<script setup lang="ts">
import { nextTick, ref, toRefs } from 'vue'
import { useContextMenuStore } from '@/stores'
const contextMenu = useContextMenuStore()

const props = defineProps({
  extraClass: {
    type: String,
  },
  show:{
    type :Boolean,
    default: false
  }
})
const { extraClass } = toRefs(props)

const el = ref<HTMLElement>()
const shown = ref(false)
const top = ref(0)
const left = ref(0)

const open = async (_top = 0, _left = 0) => {
  top.value = _top
  left.value = _left
  shown.value = true

  await nextTick()

  try {
    //await preventOffScreen(el.value!)
    //initSubmenus()
  } catch (e) {
    console.log('error on contextMenu')
  }


}

const close = () => (shown.value = false)

defineExpose({ open, close, shown })



</script>

<template>
  <nav
    v-show="show"
    ref="el"
    :class="extraClass"
    :style="{top: `${contextMenu.pageY}px`, left: `${contextMenu.pageX}px`}"
    class="menu"
    tabindex="0"
    @contextmenu.prevent
    @keydown.esc="close"
  >
    <slot>Menu items go here.</slot>

  </nav>
</template>

<style scoped lang="scss">
nav{
  position: fixed;
  padding: 0;
}
</style>